<template>
  <div class="box">
    <el-button type="primary" icon="el-icon-edit">写文章</el-button>
    <div class="search">
      <div class="search-left">
        <span>文章标题</span>
        <el-input
          v-model="list.searchTitle"
          placeholder="请输入(模糊查询)"
        ></el-input>
      </div>
      <div class="search-right">
        <span class="demonstration">发布时间</span>
        <el-date-picker
          v-model="date"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        >
        </el-date-picker>
      </div>
      <div class="btn">
        <el-button type="primary" icon="el-icon-search" @click="searchFun"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh-right" @click="resetFun"
          >重置</el-button
        >
      </div>
    </div>
    <div class="maim">
      <el-table :data="dataList" style="width: 100%">
        <el-table-column label="标题" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="预览图" width="180">
          <template slot-scope="scope">
            <img :src="scope.row.titleImage" alt="预览图" class="preview" />
          </template>
        </el-table-column>
        <el-table-column label="发布时间" width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              @click="handlePreview(scope.$index, scope.row)"
              >预览</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next"
        :total="list.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { Article } from "../../units/api.js";
import { ArticleDel } from "../../units/api.js";
export default {
  data() {
    return {
      list: {
        current: 1,
        size: 10,
        searchTitle: "",
        startData: "",
        endData: "",
      },
      dataList: [],
      date: [],
      tableData: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      articleId: {
        articleId:"",
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      let res = await Article(this.list);
      console.log("这是文章列表", res);
      this.dataList = res.data.data.records;
      this.list = res.data.data;
    },
    //搜索
    searchFun() {
      this.list.startData = this.date[0].toLocaleString();
      this.list.endData = this.date[1].toLocaleString();
      this.getList();
    },
    // 重置
    resetFun() {
      this.list.searchTitle = "";
      this.date = [];
    },
    //编辑
    handleEdit(index, row) {
      console.log(index, row);
    },
    //预览
    handlePreview(index, row) {
      // console.log(index, row);
      console.log(row.id);
      
      const{href} = this.$router.resolve({
        path:'/home/detail',
        query:{articleId:row.id}
      })
      window.open(href,'_blank')
    },
    //删除
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          console.log(index, row);
          this.articleId.articleId = row.id;
          console.log(this.articleId);
          
          let res = await ArticleDel(this.articleId);
          console.log(res);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //翻页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.list.current = val;
      this.getList();
    },
  },
};
</script>

<style scoped>
.box {
  padding: 10px;
  background-color: white;
  text-align: start;
  border-radius: 8px;
}
.search {
  padding: 20px 10px;
  background-color: white;
  border-radius: 4px;
  display: flex;
}
.search-left {
  display: flex;
  align-items: center;
}
.search-left .el-input {
  margin-left: 20px;
  width: 200px;
}
.search-right {
  display: flex;
  align-items: center;
  margin-left: 30px;
}
.search-right > span {
  margin-right: 20px;
}
.btn {
  display: flex;
  margin-left: 10px;
  align-items: center;
}
.btn > .el-button {
  width: 80px;
}
.preview {
  width: 50px;
}
</style>